<template>
  <el-container style="height: 100%">
    <el-header height="400px">
      <div style="margin-top: 9px; margin-bottom: 9px">
        <el-button type="primary" @click="show_cal_panel = true">创建</el-button>
      </div>
      <el-table :data="tableData" highlight-current-row stripe @current-change="loadDetail" height="350px">
        <el-table-column
          v-for="column in tableColumns"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              return cell_formatter(column, cellValue, tableColumns)
            }
          "
        />
        <el-table-column width="160" label="操作">
          <template #default="scope">
            <el-button size="small" @click="print(scope.row)"> 打印 </el-button>
            <el-button :disabled="scope.row.status !== e_move_status.开立" size="small" @click="ready(scope.row)"> 派单 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-header>
    <el-main>
      <el-table :data="currentDetail" stripe height="100%">
        <el-table-column
          v-for="column in move_bill_detail_define"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              return cell_formatter(column, cellValue, move_bill_detail_define)
            }
          "
        />
      </el-table>
    </el-main>
    <el-dialog v-model="show_cal_panel" width="450px" style="padding: 20px" title="创建">
      <el-divider content-position="left">工人</el-divider>
      <el-select v-model="staff" placeholder="">
        <el-option v-for="item in dbStore.staff" :key="item" :label="item" :value="item"> </el-option>
      </el-select>
      <el-divider content-position="left">预定库位</el-divider>
      <el-select v-model="location" placeholder="">
        <el-option v-for="item in dbStore.location" :key="item.code" :label="item.code + '|' + item.zone" :value="item.code">
        </el-option>
      </el-select>
      <template #footer>
        <el-button type="primary" @click="confirm">确认</el-button>
      </template>
    </el-dialog>
  </el-container>
</template>

<script lang="ts" setup>
import { move_bill_define, move_bill_detail_define } from '@/meta/index'
import type { move_bill, move_bill_detail } from '@/types/billdata'
import { fill_ref_info, cell_formatter, make_billcode, today } from '@/utils/common'
import { onMounted, ref } from 'vue'
import copy from 'copy-to-clipboard'
import { ElMessageBox } from 'element-plus'
import { useDbStore } from '@/stores/modules/database'
import { e_code_prefix, e_move_status } from '@/types/enum'
const dbStore = useDbStore()
const staff = ref<string>()
const location = ref<string>()
//const currentMove = ref<move_bill>()
const show_cal_panel = ref<boolean>(false)
const currentDetail = ref<move_bill_detail[]>()
const tableColumns = move_bill_define
const tableData = ref<move_bill[]>()
const loadDetail = (val: move_bill) => {
  fill_ref_info(val.items, move_bill_detail_define).then(() => {
    currentDetail.value = val.items
  })
}
const confirm = () => {
  if (!staff.value) {
    ElMessageBox.alert('需要指定工人', '错误')
    return
  }
  if (!location.value) {
    ElMessageBox.alert('需要指定库位', '错误')
    return
  }
  const move: move_bill = {
    billcode: make_billcode('MV'),
    docdate: today(),
    status: e_move_status.开立,
    staff: staff.value!,
    location: dbStore.location.find((r) => r.code === location.value)!,
    items: []
  }
  dbStore.addMoveBill(move)
  show_cal_panel.value = false
}
const ready = (p: move_bill) => {
  p.status = e_move_status.就绪
  dbStore.saveMoveBill()
}
onMounted(() => {
  const tmp = dbStore.move
  fill_ref_info(tmp, move_bill_define)
    .then(() => {
      tableData.value = tmp
      loadDetail(tmp[0])
    })
    .catch(() => {
      console.log('err')
    })
})
const print = (p: move_bill) => {
  copy(e_code_prefix.搬运单 + p.billcode)
  ElMessageBox.alert('条码号已复制到剪切板', '提示')
}
</script>
